// 预约状态颜色
.status {
  &-pending {
    @apply bg-warning-50 text-warning-700 dark:bg-warning-900/20 dark:text-warning-400;
  }
  
  &-confirmed {
    @apply bg-success-50 text-success-700 dark:bg-success-900/20 dark:text-success-400;
  }
  
  &-completed {
    @apply bg-info-50 text-info-700 dark:bg-info-900/20 dark:text-info-400;
  }
  
  &-cancelled {
    @apply bg-danger-50 text-danger-700 dark:bg-danger-900/20 dark:text-danger-400;
  }
}

// 预约卡片样式
.booking-card {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300;

  &:hover {
    @apply shadow-lg transform -translate-y-1;
  }

  .card-header {
    @apply p-4 border-b border-gray-100 dark:border-gray-700;
  }

  .card-body {
    @apply p-6;
  }

  .info-section {
    @apply bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4 mb-4;
  }

  .info-grid {
    @apply grid grid-cols-2 md:grid-cols-4 gap-4;
  }

  .info-item {
    @apply space-y-1;

    .label {
      @apply text-sm text-gray-500 dark:text-gray-400;
    }

    .value {
      @apply text-gray-900 dark:text-white;
    }
  }

  .tag-group {
    @apply flex flex-wrap gap-2;
  }

  .photo-grid {
    @apply grid grid-cols-3 gap-4;

    .photo-item {
      @apply relative aspect-[4/3] rounded-lg overflow-hidden;
    }
  }

  .review-section {
    @apply bg-gray-50 dark:bg-gray-700/50 rounded-lg p-4;

    .review-header {
      @apply flex items-center justify-between mb-2;
    }

    .review-content {
      @apply text-gray-600 dark:text-gray-400 mb-3;
    }

    .review-photos {
      @apply grid grid-cols-4 gap-2;

      .photo-item {
        @apply relative aspect-square rounded-lg overflow-hidden;
      }
    }
  }
}

// 预约表单样式
.booking-form {
  .form-section {
    @apply mb-6;

    .section-title {
      @apply text-lg font-medium text-gray-900 dark:text-white mb-4;
    }
  }

  .price-calculator {
    @apply bg-gray-50 dark:bg-gray-700 p-4 rounded-lg mt-4;

    .price-row {
      @apply flex justify-between items-center text-lg;

      .label {
        @apply text-gray-600 dark:text-gray-300;
      }

      .value {
        @apply text-primary-600 dark:text-primary-400 font-bold;
      }
    }
  }
}

// 评价表单样式
.review-form {
  .form-section {
    @apply mb-6;
  }

  .photo-uploader {
    @apply mt-4;

    .upload-tip {
      @apply text-sm text-gray-500 dark:text-gray-400 mt-2;
    }
  }
}

// 时间线样式
.status-timeline {
  :deep(.el-timeline) {
    .el-timeline-item__node {
      @apply bg-primary-500;
    }

    .el-timeline-item__timestamp {
      @apply text-gray-500 dark:text-gray-400;
    }

    .el-timeline-item__content {
      @apply text-gray-900 dark:text-white;
    }
  }
}

// 标签样式
.status-tag {
  &-pending {
    @apply bg-warning-100 text-warning-800 dark:bg-warning-900/30 dark:text-warning-300;
  }

  &-confirmed {
    @apply bg-success-100 text-success-800 dark:bg-success-900/30 dark:text-success-300;
  }

  &-completed {
    @apply bg-info-100 text-info-800 dark:bg-info-900/30 dark:text-info-300;
  }

  &-cancelled {
    @apply bg-danger-100 text-danger-800 dark:bg-danger-900/30 dark:text-danger-300;
  }
}

// 动画效果
.booking-transition {
  &-enter-active,
  &-leave-active {
    @apply transition-all duration-300;
  }

  &-enter-from,
  &-leave-to {
    @apply opacity-0 transform translate-y-4;
  }
} 